<template>
  <v-chart
    :ref='chartOption.refID'
    :theme='tdTheme'
    @click='onClick'
    :autoresize='true'
    :options='polar'
  />
</template>

<script>
import 'echarts'
import ECharts from 'vue-echarts'
import tdTheme from './theme.json'
import chartMixins from './chartMixins'

export default {
  name: 'ChartBar',
  components: {
    'v-chart': ECharts
  },
  mixins: [chartMixins],
  props: {},
  data() {
    return {
      tdTheme: tdTheme,
      polar: {},
      chartOption: {
        bottom: {
          type: Number,
          default: 60
        },
        rotate: {
          type: Number,
          default: 50
        },
        xAxis: Array,
        yAxis: Array,
        series: Array,
        refID: String,
        text: String,
        subText: String,
        seriesColorFn: Function
      }
    }
  },
  methods: {
    init() {
      let seriesData = []
      let legendData = []

      const seriesPublicAttr = {
        type: 'bar',
        stack: `stackBar-${Math.random()}`,
        color: this.chartOption.seriesColorFn,
        itemStyle: {
          normal: {
            color: this.chartOption.seriesColorFn
          }
        },
        label: {
          show: false,
          color: '#fff',
          // position: 'top',
          // barGap: 0,
          // align: 'left',
          // label: 'default',
          formatter: function(params) {
            if (params.value > 0) {
              return params.value
            } else {
              return ''
            }
          }
        }
      }

      if (this.chartOption && this.chartOption.series) {
        this.chartOption.series.forEach(val => {
          legendData.push(val.name)
          let series = Object.assign(JSON.parse(JSON.stringify(seriesPublicAttr)), val)
          if (val.type === 'line' || val.notStack) {
            delete series.stack
          }
          seriesData.push(series)
        })
      }
      let option = {
        toolbox: {// 工具栏,内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
          orient: 'vertical',
          show: false,
          feature: {// 各工具配置项。
            dataView: {// 数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
              show: false, // 是否显示组件。
              readOnly: false
            },
            magicType: {// 动态类型切换 示例：feature: { magicType: {type: ['line', 'bar', 'stack', 'tiled']}}
              show: true,
              type: ['line', 'bar', 'stack', 'tiled']
            },
            restore: {// 配置项还原。
              show: true
            },
            saveAsImage: {// 保存为图片。
              show: true
            }
          }
        },
        title: {
          top: 10,
          bottom: 10,
          left: '10%',
          text: this.chartOption.text,
          subtext: this.chartOption.subText
        },
        legend: {
          top: 10,
          // bottom: 20,
          right: '10%',
          data: legendData
        },
        grid: {
          // top: 70,
          bottom: this.chartOption.bottom,
          left: '17%',
          right: '5%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          // axisLabel: { rotate: this.chartOption.rotate, interval: 0 },
          axisLabel: {
            show: true,
            rotate: this.chartOption.rotate,
            interval: 'auto',
            formatter: function(params) {
              // var newParamsName = ''
              // var paramsNameNumber = params.length
              // var provideNumber = 4 // 一行显示几个字
              // var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
              // if (paramsNameNumber > provideNumber) {
              //   for (var p = 0; p < rowNumber; p++) {
              //     var tempStr = ''
              //     var start = p * provideNumber
              //     var end = start + provideNumber
              //     if (p === rowNumber - 1) {
              //       tempStr = params.substring(start, paramsNameNumber)
              //     } else {
              //       tempStr = params.substring(start, end) + '\n'
              //     }
              //     newParamsName += tempStr
              //   }
              // } else {
              //   newParamsName = params
              // }
              // return newParamsName
              if (params && params.length > 5) {
                return (params.slice(0, 5) + '...')
              } else {
                return params
              }
            },
            textStyle: {
              color: '#fff' // 文字颜色
            }
          },
          splitLine: {
            show: false
          },
          type: 'category',
          data: this.chartOption.xAxis
        },
        yAxis:
          this.chartOption.yAxis.length > 0
            ? this.chartOption.yAxis
            : {
              type: 'value',
              splitLine: {
                show: false
              },
              axisLabel: {
                textStyle: {
                  color: '#fff'
                }
              }
            },
        series: seriesData
      }
      console.log('option1', JSON.stringify(option))
      this.polar = option
    },
    onClick(event, instance, echarts) {
      console.log(event, instance, echarts)
      this.$emit('chartClick', arguments)
    }
  },
  watch: {
    series() {
      this.init()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  }
}
</script>
<style scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
